<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" @close="onCancel">

    <a-form-item label="指定时间范围">
      <a-range-picker v-model="timeRange" format="YYYY-MM-DD" :shortcuts="TimeUtil.presets" :allow-clear="true"/>
      <a-button :disabled="disabledBtn" :loading="loadingState" @click="onLoadList" type="primary" style="margin-left: 12px">开始查询</a-button>
    </a-form-item>
    <a-divider/>
    <a-scrollbar style="height:calc(100vh - 180px);overflow: auto;">
      <a-empty v-if="dataList.length===0"/>

      <a-timeline :label-position="'relative'">
        <a-timeline-item v-for="(item ,  index ) in dataList" :key="index" :label="item.eventTime">

          <a-typography-text :type="item.eventTotal >0?'success':'danger'  ">
            {{ item.event.label }}: {{ item.eventTotal > 0 ? '+' : '' }} {{ item.eventTotal }}金币
          </a-typography-text>
          <br/>
          <a-typography-text
              type="secondary"
              :style="{ fontSize: '12px', marginTop: '6px' }">
            {{ item.remark }} ,事件期初:{{ item.originalTotal }}金币 ,事件期末:{{ item.remainTotal }}金币
          </a-typography-text>
        </a-timeline-item>
      </a-timeline>
    </a-scrollbar>
  </a-drawer>
</template>
<script setup lang="ts">
import {LocalDrawer} from "@/libs/core";
import {computed, onMounted, ref} from "vue";
import {EmptyUtil, TimeUtil} from "@/utils";
import {SystemHttp} from "../resource/http";

const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])
const service = new LocalDrawer(emit)
const {LAYER, onCancel} = service
const {member} = props.record;
const timeRange = ref(TimeUtil.LAST_30_DAYS)
LAYER.title = `${member.nickName}【${member.phoneNumber}】金币明细账单`
LAYER.width = 650
const dataList = ref([])


const disabledBtn = computed(() => EmptyUtil.isEmptyArray(timeRange.value))
const loadingState = ref(false)
const onLoadList = async () => {
  try {
    loadingState.value = true
    const dateRange = timeRange.value.join(",")
    const memberId = props.record.member.id;
    const {data} = await SystemHttp.getBillList({dateRange, memberId})
    dataList.value = data
  } finally {
    loadingState.value = false
  }
}

onMounted(() => onLoadList())
</script>
